{# need var:
- reload for the data-reload content
- target: scope_experiments, scope_items, etc...
- optional btnId: to change the id attr of main div
- optional setQueryParam: to add scope=X in query params upon change through a data attribute
#}
{% set scopeValue = App.Request.query.has('scope') ? App.Request.query.getInt('scope') : App.Users.userData[target] %}
{% set setQueryParam = setQueryParam|default(0) %}
{% if not scopeValue %}
  {% set scopeValue = 2 %}
{% endif %}
<div id='{{ btnId|default('scopeBtn') }}' class='btn-group'>
  <button class='btn hl-hover-gray dropdown-toggle' type='button' data-toggle='dropdown' aria-haspopup='true' aria-label='{{ 'Scope'|trans }}' title='{{ 'Scope'|trans }}' aria-expanded='false'><i class='fas fa-{{ scopeValue|toIcon }} fa-fw mr-1'></i></button>
  <div class='dropdown-menu'>
    <h6 class='dropdown-header'>{{ 'Scope'|trans }}</h6>
    <button type='button' data-target='{{ target }}' data-action='scope-change' data-reload='{{ reload }}' data-value='1' data-set-query-param='{{ setQueryParam }}' class='btn btn-dropdown-item dropdown-item {{ scopeValue == 1 ? 'active' }}'>
      <i class='fas fa-user fa-fw mr-1 {{ scopeValue == 1 ? 'color-white' }}'></i>{{ 'Self'|trans }}
    </button>

    <button type='button' data-target='{{ target }}' data-action='scope-change' data-reload='{{ reload }}'  data-value='2' data-set-query-param='{{ setQueryParam }}' class='btn btn-dropdown-item dropdown-item {{ scopeValue == 2 ? 'active' }}'>
      <i class='fas fa-users fa-fw mr-1 {{ scopeValue == 2 ? 'color-white' }}'></i>{{ 'Team'|trans }}
    </button>

    <button type='button' data-target='{{ target }}' data-action='scope-change' data-reload='{{ reload }}' data-value='3' data-set-query-param='{{ setQueryParam }}' class='btn btn-dropdown-item dropdown-item {{ scopeValue == 3 ? 'active' }}'>
      <i class='fas fa-globe fa-fw mr-1 {{ scopeValue == 3 ? 'color-white' }}'></i>{{ 'Everything'|trans }}
    </button>
  </div>
</div>
